<template>
    <div class="center-tabbar">
        <div v-for="(item) in menuList" :key="item.id" @click="activeFun(item)" class="menuList" :class="{ active: activeMenuId == item.id }">
          <div class="menuText">{{ item.text }}</div>
        </div>
        <div class="logout-cont" @click="logout">退出登录</div>
        <app-menu ref="appMenuRef" class="appMenu" />
    </div>
  </template>
  <script>
  import store from '@/store'
  import router from '@/router'
  import appMenu from '@/views/components/menu/Menu'
  import Cookies from 'js-cookie'

  export default {
    name: "big-tab-bar",
    components: { appMenu },
    data() {
      return {
        menuList: [
          {id: 0, text: '产品碳足迹'},
          {id: 1, text: '组织碳管理'},
          {id: 2, text: 'CCER项目'},
          {id: 3, text: '绿证管理'},
        ],
        activeMenuId: 0,
      }
    },
    watch: {},
    created() {
    },
    mounted() {
      if(Cookies.get('activeMenuId')){
        this.activeMenuId = Cookies.get('activeMenuId');
      }
    },
    methods: {
      // 点击头部导航
      activeFun(val) {
        let _that = this;
        _that.activeMenuId = val.id;
        Cookies.set('activeMenuId', val.id)
        let bigScreen = [];
        if (val.id == 0) {
            // 产品碳足迹
            bigScreen = [
              {
                path: '/bigScreen',//首页
                component: (resolve) => require(['@/views/bigScreen/views/App'], resolve),
                name: 'bigScreen/index',
                hidden: true,
                children: [
                  {
                    path: 'productCarbon',
                    hidden: true,
                    name: 'b_productCarbon',
                    component: (resolve) => require(['@/views/bigScreen/carbon/productCarbon/index'], resolve),
                    meta: { title: '碳足迹计算', icon: 'dashboard', noCache: true, affix: true, bigScreen: true }
                  },
                  {
                    path: 'product',
                    hidden: true,
                    component: (resolve) => require(['@/views/bigScreen/views/App'], resolve),
                    name: 'b_product',
                    meta: { title: '产品配置', icon: 'dashboard', noCache: true, affix: true, bigScreen: true },
                    children: [{
                      path: 'productCategorize',
                      hidden: true,
                      name: 'b_productCategorize',
                      meta: { title: '产品分类', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/productCategorize/index'], resolve),
                    },{
                      path: 'standardStage',
                      hidden: true,
                      name: 'b_standardStage',
                      meta: { title: '标准阶段', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/standardStage/index'], resolve),
                    }]
                  },
                  {
                    path: 'categorize',
                    hidden: true,
                    component: (resolve) => require(['@/views/bigScreen/views/App'], resolve),
                    name: 'b_categorize',
                    meta: { title: '因子库配置', icon: 'dashboard', noCache: true, affix: true, bigScreen: true },
                    children: [{
                      path: 'categorizeInfo',
                      hidden: true,
                      name: 'b_categorizeInfo',
                      meta: { title: '因子特征要素', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/categorizeInfo/index'], resolve),
                    },{
                      path: 'carbonFactorInfo',
                      hidden: true,
                      name: 'b_carbonFactorInfo',
                      meta: { title: '碳排放因子库', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/carbonFactorInfo/index'], resolve),
                    }]
                  },
                  {
                    path: 'productInfoAll',
                    hidden: true,
                    component: (resolve) => require(['@/views/bigScreen/views/App'], resolve),
                    name: 'b_productInfoAll',
                    meta: { title: '碳排放核算', icon: 'dashboard', noCache: true, affix: true, bigScreen: true },
                    children: [{
                      path: 'productInfo',
                      hidden: true,
                      name: 'b_productInfo',
                      meta: { title: '产品周期要素', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/productInfo/index'], resolve),
                    },{
                      path: 'emissionPathLog',
                      hidden: true,
                      name: 'b_emissionPathLog',
                      meta: { title: '减排路径记录', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/carbon/emissionPathLog/index'], resolve),
                    },{
                      path: 'productCarbonConChart',
                      hidden: true,
                      name: 'b_productCarbonConChart',
                      meta: { title: '历史查询', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/carbon/productCarbon/ProductCarbonConChart'], resolve),
                    }]
                  },
                ]
              }
            ]
            _that.$store.commit('SET_BIG_SCREEN', bigScreen);
        } else if (val.id == 1) {
            // 组织碳管理
            bigScreen = [
            {
                path: '/bigScreen',//首页
                component: (resolve) => require(['@/views/bigScreen/views/App'], resolve),
                name: 'bigScreen/index',
                hidden: true,
                children: [
                  {
                    path: 'project1',
                    hidden: true,
                    component: (resolve) => require(['@/views/bigScreen/project/index'], resolve),
                    name: 'b_project1',
                    meta: { title: '建设过程碳排放', icon: 'dashboard', noCache: true, affix: true, bigScreen: true }
                  },
                  {
                    path: 'carbonAnalysis',
                    hidden: true,
                    name: 'b_carbonAnalysis',
                    meta: { title: '运行过程碳排放', icon: 'monitor', noCache: true, affix: true, bigScreen: true },
                    component: (resolve) => require(['@/views/bigScreen/runCarbonEmission/index'], resolve),
                  }
                    ]
                }
            ];
            _that.$store.commit('SET_BIG_SCREEN', bigScreen);
        } else if (val.id == 2) {
          // CCER项目
          bigScreen = [
              {
                path: '/bigScreen',//首页
                component: (resolve) => require(['@/views/bigScreen/views/App'], resolve),
                name: 'bigScreen/index',
                hidden: true,
                children: [
                  {
                    path: 'product2',
                    hidden: true,
                    component: (resolve) => require(['@/views/bigScreen/ccerProject/index'], resolve),
                    name: 'b_product2',
                    meta: { title: '项目管理', icon: 'dashboard', noCache: true, affix: true, bigScreen: true }
                  },
                  {
                    path: 'categorize',
                    hidden: true,
                    component: (resolve) => require(['@/views/bigScreen/views/App'], resolve),
                    name: 'b_categorize',
                    meta: { title: '减排交易市场', icon: 'dashboard', noCache: true, affix: true, bigScreen: true },
                    children: [{
                      path: 'announceIng',
                      hidden: true,
                      name: 'b_announceIng',
                      meta: { title: '公示中项目', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/ccerProject/announceIng'], resolve),
                    },{
                      path: 'announceEng',
                      hidden: true,
                      name: 'b_announceEng',
                      meta: { title: '公示结束项目', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/ccerProject/announceEng'], resolve),
                    },{
                      path: 'registered',
                      hidden: true,
                      name: 'b_registered',
                      meta: { title: '已登记项目', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/ccerProject/registered'], resolve),
                    },{
                      path: 'announceIngReduce',
                      hidden: true,
                      name: 'b_announceIngReduce',
                      meta: { title: '公示中减排量', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/ccerProject/announceIngReduce'], resolve),
                    },{
                      path: 'announceEndReduce',
                      hidden: true,
                      name: 'b_announceEndReduce',
                      meta: { title: '公示结束减排量', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/ccerProject/announceEndReduce'], resolve),
                    },{
                      path: 'registeredReduce',
                      hidden: true,
                      name: 'b_registeredReduce',
                      meta: { title: '已登记减排量', icon: 'report', noCache: true, affix: true, bigScreen: true },
                      component: (resolve) => require(['@/views/bigScreen/ccerProject/registeredReduce'], resolve),
                    }]
                  },
                ]
              }
            ]
            _that.$store.commit('SET_BIG_SCREEN', bigScreen);
        } else if (val.id == 3) {
          // 绿证管理
          bigScreen = [
              {
                path: '/bigScreen',//首页
                component: (resolve) => require(['@/views/bigScreen/views/App'], resolve),
                name: 'bigScreen/index',
                hidden: true,
                children: [
                  {
                    path: 'product3',
                    hidden: true,
                    component: (resolve) => require(['@/views/bigScreen/greenCertificate/index'], resolve),
                    name: 'b_product3',
                    meta: { title: '交易管理', icon: 'dashboard', noCache: true, affix: true, bigScreen: true }
                  },
                  {
                    path: 'listing',
                    hidden: true,
                    component: (resolve) => require(['@/views/bigScreen/greenCertificate/listing'], resolve),
                    name: 'b_listing',
                    meta: { title: '售方挂牌情况', icon: 'dashboard', noCache: true, affix: true, bigScreen: true },
                  },
                  {
                    path: 'wantBuy',
                    hidden: true,
                    component: (resolve) => require(['@/views/bigScreen/greenCertificate/wantBuy'], resolve),
                    name: 'b_wantBuy',
                    meta: { title: '求购动态', icon: 'dashboard', noCache: true, affix: true, bigScreen: true },
                  },
                ]
              }
            ]
            _that.$store.commit('SET_BIG_SCREEN', bigScreen);
        }
        store.dispatch('GetInfo').then(res => {
          // 拉取user_info
          const roles = res.roles;
          store.dispatch('GenerateRoutes', {roles}).then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            accessRoutes.push(store.state.permission.bigScreen[0]);
            router.addRoutes(accessRoutes); // 动态添加可访问路由表
            store.dispatch('SelectCategorizeDict');
            store.dispatch('SelectProductCategorizeDict');
            // next({...to, replace: true}) // hack方法 确保addRoutes已完成
            _that.$refs.appMenuRef.refInit();
            if(val.id == 0) {
              this.$router.push({path:'/bigScreen/productCarbon'});
            } else if (val.id == 1) {
              this.$router.push({path:'/bigScreen/project1'});
            } else if (val.id == 2) {
              this.$router.push({path:'/bigScreen/product2'});
            } else if (val.id == 3) {
              this.$router.push({path:'/bigScreen/product3'});
            }
          })
        }).catch(err => {
          store.dispatch('FedLogOut').then(() => {
            Message.error(err);
            // next({path: '/'})
          })
        })
      },
      logout() {
        this.$confirm('确定退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/index';
          })
        })
      },
    },
  }
  </script>
  <style lang="scss" scoped>
  .center-tabbar {
    position: relative;
    display: flex;
    width: calc(100% - 360px);
    height: 40px;
  }
  .menuList {
    width: 200px;
    height: 40px;
    color: #FFFFFF;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-image: url("~@/assets/bigScreen/index/menu.png") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
    &.active {
      background-image: url("~@/assets/bigScreen/index/menu-active.png") !important;
    }
    &:hover{
      background-image: url("~@/assets/bigScreen/index/menu-active.png") !important;
    }
  }
  .logout-cont {
    width: 100px;
    height: 40px;
    color: #FFFFFF;
    position: absolute;
    background-color: rgba(55, 229, 250,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0px;
    border-radius: 6px;
    cursor: pointer;
    &:hover{
      // background-color: #026272;
      background-color: rgba(55, 229, 250, 0.6);
    }
  }
  .appMenu {
    position: absolute;
    left: -380px;
  }
  </style>
  